<!-- 修改密码 -->
<template>
    <div class='change-password'>
        <van-nav-bar title="修改登录密码" left-arrow @click-left="goBack" />
        <van-cell-group>
            <van-field type="password" clearable v-model="oldPassword" placeholder="请输入旧密码" />
            <van-field type="password" clearable v-model="newPassword" placeholder="请输入新密码" />
            <van-field type="password" clearable v-model="confirmPassword" placeholder="请确认新密码" />
        </van-cell-group>
        <p class="tip">
            <van-icon name="warning" color="#8BC34A" size="16" />
            新密码为6-12位
        </p>
        <div class="save-btn">
            <van-button @click="savePassword" block plain size="normal" type="default">保存</van-button>
        </div>
    </div>
</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    import {mapMutations,mapActions,mapState} from 'vuex'
    
    import { Toast } from "vant"
    export default {
        name: 'ChangePassword',
        //import引入的组件需要注入到对象中才能使用
        components: {},
        data() {
            //这里存放数据
            return {
                oldPassword: '',
                newPassword: '',
                confirmPassword: ''
            };
        },
        //监听属性 类似于data概念
        computed: mapState(['userPhone','token']), // this.token相当于this.$store.state.token
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {
            ...mapMutations(['changeToken','changeUserid','changeuserPhone']),
            goBack() {
                window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/');
            },
            savePassword() {
                const { oldPassword, newPassword, userPhone } = this
                const reg = /^\d{6,12}$/;
                if (!reg.test(this.oldPassword) || !reg.test(this.newPassword)) {
                    this.$toast('请输入6-12位数字密码');
                    return;
                } else {
                    if (this.newPassword === this.oldPassword) {
                        this.$toast('新密码不能与旧密码一致');
                    } else if (this.newPassword === this.confirmPassword) {
                        console.log("发请求")
                        this.$axios.post("/update/password", {
                            oldpassword:oldPassword,
                            newpassword:newPassword,
                            phone:this.userPhone
                        }).then((res) => {
                            //console.log(res);
                            //console.log(6666,oldPassword,newPassword,this.userPhone);
                            const { status, message, data } = res

                            if (data.code == 200) {
                                // Toast("密码设置成功")
                                this.changeToken("");
                                // console.log(this.token)
                                this.$toast('密码修改成功!请重新登录',
                                this.$router.push(
                                    {
                                        name: 'start',
                                    }
                                )
                                );
                                console.log(data)

                                
                            } else {
                                Toast(data.message)
                            }
                            
                        })
                       
                    } else {
                        this.$toast('两次输入的密码不一致');
                    }
                }
            }
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {
            // console.log(666,this.userPhone)
        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {

        },
        beforeCreate() { }, //生命周期 - 创建之前
        beforeMount() { }, //生命周期 - 挂载之前
        beforeUpdate() { }, //生命周期 - 更新之前
        updated() { }, //生命周期 - 更新之后
        beforeDestroy() { }, //生命周期 - 销毁之前
        destroyed() { }, //生命周期 - 销毁完成
        activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style lang='scss' scoped>
    //@import url(); 引入公共css类
    .tip {
        line-height: 0.6rem;
        padding: 0 0.1rem;
        font-size:0.28rem;
        .van-icon {
            position: relative;
            top: 0.07rem;
        }
    }

    .save-btn {
        padding: 0.3rem;
    }
</style>